{% extends 'wanplus/wangwangba/base_nav_frame.html' %}
{% load staticfiles %}
{% block cssExt %}
  <link rel="stylesheet" rev="stylesheet" href="{% static 'wanplus/css/dogtv.css' %}" />
{% endblock %}
{% block content %}
  <p>DOG TV封面管理</p>
  <div>
    <div id="dogtv-grid-container">
      <div id="dogtv-grid-cell-1" class="dogtv-grid-cell" data-position="0">
        <img src="http://121.201.7.173:8087/api/media/wwb_dogtv_0.png" />
        <input type="file" title="点击更改综合栏目的封面" />
      </div>
      <div id="dogtv-grid-cell-2" class="dogtv-grid-cell" data-position="1">
        <img src="http://121.201.7.173:8087/api/media/wwb_dogtv_1.png" />
        <input type="file" title="点击更改休闲栏目的封面" />
      </div>
      <div id="dogtv-grid-cell-3" class="dogtv-grid-cell" data-position="2">
        <img src="http://121.201.7.173:8087/api/media/wwb_dogtv_2.png" />
        <input type="file" title="点击更改运动栏目的封面" />
      </div>
      <div id="dogtv-grid-cell-4" class="dogtv-grid-cell" data-position="3">
        <img src="http://121.201.7.173:8087/api/media/wwb_dogtv_3.png" />
        <input type="file" title="点击更改展示栏目的封面" />
      </div>
      <div id="dogtv-grid-cell-5" class="dogtv-grid-cell" data-position="4">
        <img src="http://121.201.7.173:8087/api/media/wwb_dogtv_4.png" />
        <input type="file" title="点击更改DOG TV是什么的封面" />
      </div>
      <div id="dogtv-grid-cell-6" class="dogtv-grid-cell" data-position="5">
        <img src="http://121.201.7.173:8087/api/media/wwb_dogtv_5.png" />
        <input type="file" title="点击更改FAQ的封面" />
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="row" style="margin-top: 16px">
      <div class="container-fluid">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn btn-info btn-block" id="dogtv-btn-preview">预览</button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn btn-success btn-block" id="dogtv-btn-release">上线</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block jsimport %}
  <script type="text/javascript" src="{% static 'utils/dmuploader.js' %}" ></script>
{% endblock %}
{% block jsscript %}
  <script type="text/javascript">
  $(document).ready(function(e) {
    var uploadFiles = [];
    var initUploader = function() {
      var args = arguments;
      if (arguments.length == 1 && $.isArray(arguments[0])) {
        args = arguments[0]
      }
      $.each(args, function(index, item) {
        $(item).data("position", index);
        $(item).dmUploader({
          url : "./dogtv/cover/save/" + index
          , allowedType : "image/*"
          , dataType : "json"
          , onInit : function() {
          }
          , onBeforeUpload : function(id) {
          }
          , onComplete : function() {

          }
          , onUploadSuccess : function(id, data) {
            if (data.resultCode == 1 && data.data) {
              var fn = data.data.filename;
              uploadFiles.push({
                position : $(item).data("position")
                , filename : fn
              });
              $(item + " img").attr({
                src : fn
              });
            }
          }
          , onUploadError : function(id, message) {
            alert("图片上传失败，" + message);
          }
        });
      });
    };

    var loadCovers = function() {
      $.ajax({
        url : "./dogtv/covers/load"
        , type : "get"
        , dataType : "json"
        , success : function(data) {
          if (data && data.resultCode === 1 && data.data) {
            var resultList = data.data.list;
            var length = resultList.length;
            for (var i = 0; i < length; i++) {
              var item = resultList[i];
              $("#dogtv-grid-cell-" + (item.position+1) + " img").attr({
                src : item.filename
              })
            }
          }
        }
        , error : function() {}
      })
    };

    initUploader("#dogtv-grid-cell-1",
        "#dogtv-grid-cell-2",
        "#dogtv-grid-cell-3",
        "#dogtv-grid-cell-4",
        "#dogtv-grid-cell-5",
        "#dogtv-grid-cell-6");

    loadCovers();

    $("#dogtv-btn-preview").click(function (e) {

      var self = $(this);
      self.empty();
      self.append($("<span />").addClass("fa fa-spinner fa-spin"));
      self.attr({
        disabled : "disabled"
      });

      var uploadData = [];
      for (var index in uploadFiles) {
        var item = uploadFiles[index];
        uploadData.push(item.position + "-" + item.filename)
      }

      $.ajax({
        url : "./dogtv/cover/sync"
        , type : "post"
        , data : {
          "covers[]" : uploadData
          , "remotehost" : "{{ api.preview_host }}"
        }
        , dataType : "json"
        , success : function(data) {

          self.empty();
          self.text("预览");
          self.removeAttr("disabled");
        }
        , error : function() {
          alert("服务器异常");

          self.empty();
          self.text("预览");
          self.removeAttr("disabled");
        }
      });
    });

    $("#dogtv-btn-release").click(function (e) {

      var self = $(this);
      self.empty();
      self.append($("<span />").addClass("fa fa-spinner fa-spin"));
      self.attr({
        disabled : "disabled"
      });

      var uploadData = [];
      for (var index in uploadFiles) {
        var item = uploadFiles[index];
        uploadData.push(item.position + "-" + item.filename)
      }

      $.ajax({
        url : "./dogtv/cover/sync"
        , type : "post"
        , data : {
          "covers[]" : uploadData
          , "remotehost" : "{{ api.release_host }}"
        }
        , dataType : "json"
        , crossDomain: true
        , success : function(data) {
          self.empty();
          self.text("上线");
          self.removeAttr("disabled");
        }
        , error : function() {
          alert("服务器异常");

          self.empty();
          self.text("上线");
          self.removeAttr("disabled");
        }
      });
    });

  });
  </script>
{% endblock %}